import { useRef, forwardRef, useImperativeHandle, useState, useMemo } from "react";

function Children({ value }) {

    const result = useMemo(() => {
        console.log('子组件渲染')
        let result = 0
        for (let i = 0; i < 1000; i++) {
            result += value * 2
        }
        return result
    }, [value])

    return (
        <>
            <div>子组件</div>
            <div>子组件计算值: {result}</div>
        </>
    )
}


export default function Parent() {
    const [count, setCount] = useState(0)
    const [inputValue, setInputValue] = useState(1)
    function handlerClick() {
        setCount(count + 1)
    }
    function handlerValue() {
        setInputValue(inputValue + 1)
    }
    return (
        <>
            <div> {count}    -------- {inputValue}   </div>
            <button onClick={handlerClick}>更新count</button>
            <button onClick={handlerValue}>更新value</button>
            <Children value={inputValue} />
        </>
    );
}